<template>
  <div class="my_contain">
    <div style="width:100%;height:100%;" ref="line"></div></div>
</template>

<script>
export default {
  name: 'MimiUdiskInfo',
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine(){ // U盘使用频率折线图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.line)
	var nodes = [{
			x: '480',
			y: '1000',
			nodeName: '负载均衡1',
			img: 'ava.png',
		}, {
			x: '480',
			y: '890',
			nodeName: 'WEB服务器',
			img: '20210206152021.png'
		},
		{
			x: '100',
			y: '750',
			nodeName: '负载均衡2',
			img: '20210206152021.png',
		},
		{
			x: '350',
			y: '750',
			nodeName: '负载均衡2',
			img: '20210118113931.png',
			alarm: '发生警告!'
		},
		{
			x: '630',
			y: '750',
			nodeName: '负载均衡2',
			img: '20210118113931.png',
		},
		{
			x: '850',
			y: '750',
			nodeName: '负载均衡2',
			img: '20210118113931.png',
		},
		{
			x: '50',
			y: '550',
			nodeName: '查验网站\n微信公众号\n政务网站',
			img: '20201209100300.png',
		},
		{
			x: '150',
			y: '550',
			nodeName: '查验网站\n微信公众号\n政务网站',
			img: '20201209100300.png',
		},
		{
			x: '300',
			y: '550',
			nodeName: '电子票制作\n及存储中心',
			img: '20201209100300.png',
		},
		{
			x: '400',
			y: '550',
			nodeName: '电子票制作\n及存储中心',
			img: '20201209100300.png',
		},
		{
			x: '570',
			y: '550',
			nodeName: '票据服务器1\n(在线)',
			img: '20201209100300.png',
		},
		{
			x: '670',
			y: '550',
			nodeName: '票据服务器1\n(在线)',
			img: '20201209100300.png',
		},
		{
			x: '800',
			y: '550',
			nodeName: '电子制票\n及存储中心',
			img: '20201209100300.png',
		},
		{
			x: '900',
			y: '550',
			nodeName: '电子制票\n及存储中心',
			img: '20201209100300.png',
		},
		{
			x: '170',
			y: '300',
			nodeName: 'Inceptor1',
			img: '20201209100300.png',
		},
		{
			x: '270',
			y: '300',
			nodeName: 'Inceptor2',
			img: '20201209100300.png',
		},
		{
			x: '700',
			y: '300',
			nodeName: '票据Oracle\n数据库服务器',
			img: '20201209100300.png',
		},
		{
			x: '800',
			y: '300',
			nodeName: '票据Oracle\n数据库服务器',
			img: '20201209100300.png',
		}
	]
	var charts = {
		nodes: [],
		linesData: [{
			remark: 'WEB服务器-->左边数起第1个负载均衡',
			coords: [
				[470, 890],
				[100, 890],
				[100, 780]
	
			]
		}, {
			remark: 'WEB服务器-->左边数起第3个负载均衡',
			coords: [
				[510, 890],
				[620, 890],
				[620, 780]
	
			]
		}, {
			remark: 'WEB服务器-->左边数起第4个负载均衡',
			coords: [
				[510, 890],
				[840, 890],
				[840, 780]
	
			]
		}, {
			remark: '左边数起第1个负载均衡-->查验网站微信公众号政务网站1',
			coords: [
				[100, 723],
				[50, 580]
	
			]
		}, {
			remark: '左边数起第1个负载均衡-->查验网站微信公众号政务网站2',
			coords: [
				[100, 723],
				[150, 580]
	
			]
		}, {
			remark: '左边数起第2个负载均衡-->电子票制作及存储中心1',
			coords: [
				[350, 723],
				[300, 580]
			],
			lineStyle: {
				normal: {
					color: '#DC143C'
				}
			},
			effect: {
				color: '#DC143C'
			}
		}, {
			remark: '左边数起第2个负载均衡-->电子票制作及存储中心2',
			coords: [
				[350, 723],
				[400, 580]
	
			],
			lineStyle: {
				normal: {
					color: '#DC143C'
				}
			},
			effect: {
				color: '#DC143C'
			}
		}, {
			remark: '左边数起第3个负载均衡-->票据服务器1',
			coords: [
				[630, 723],
				[570, 580]
	
			]
		}, {
			remark: '左边数起第3个负载均衡-->票据服务器2',
			coords: [
				[630, 723],
				[670, 580]
	
			]
		}, {
			remark: '左边数起第4个负载均衡-->电子制票及存储中心1',
			coords: [
				[850, 723],
				[800, 580]
	
			]
		}, {
			remark: '左边数起第4个负载均衡-->电子制票及存储中心2',
			coords: [
				[850, 723],
				[900, 580]
	
			]
		}, {
			remark: '查验网站-->Inceptor1',
			coords: [
				[100, 450],
				[100, 300],
				[160, 300]
	
			]
		}, {
			remark: '电子票制作及存储中心-->Inceptor2',
			coords: [
				[350, 450],
				[350, 300],
				[280, 300]
	
			]
		}, {
			remark: '票据服务器-->票据Oracle数据库服务器',
			coords: [
				[620, 450],
				[620, 300],
				[690, 300]
	
			]
		}, {
			remark: '电子制票及储存中心-->票据Oracle数据库服务器',
			coords: [
				[850, 450],
				[850, 300],
				[810, 300]
	
			]
		}]
	}
	
  for (var j = 0; j < nodes.length; j++) {
    var x = parseInt(nodes[j].x)
    var y = parseInt(nodes[j].y)
    var node = {
      nodeName: nodes[j].nodeName,
      value: [x, y],
      symbolSize: 50,
      alarm: nodes[j].alarm,
          symbol: 'image://https://gitee.com/dulily/cdn/raw/master/img/' + nodes[j].img, //图片路径
      itemStyle: {
        normal: {
          color: '#12b5d0',
        }
      }
    }
    charts.nodes.push(node)
  }
 
	var option = {
		backgroundColor: "#0B1321",
		xAxis: {
			min: 0,
			max: 1000,
			show: false,
			type: 'value'
		},
		yAxis: {
			min: 0,
			max: 1000,
			show: false,
			type: 'value'
		},
		series: [{
			type: 'graph',
			coordinateSystem: 'cartesian2d',
			label: {
				normal: {
					show: true,
					position: 'bottom',
					color: '#00FFFF'
				}
			},
			itemStyle: {
				normal: {
					label: {
						show: true,
						formatter: function(item) {
							return item.data.nodeName
						}
					}
				}
			},
			data: charts.nodes,
		}, {
			type: 'lines',
			polyline: true, // 可以在 coords 中设置多个点来绘制多段线
			coordinateSystem: 'cartesian2d',
			lineStyle: {
				normal: {
					width: 2,
					color: '#175064',
					curveness: 0.3
				}
			},
			effect: {
				show: true,
				trailLength: 0.1,
				symbol: 'arrow',
				color: '#00FFFF',
				symbolSize: 8
			},
			data: charts.linesData
		}]
	};
 
	// 基于准备好的dom，初始化echarts实例
	myChart.on('click', function (params) {
    console.log(params);
	});
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
      },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: 350px;
}
ul, li {
  margin: 0;
}
.my_contain {
  height: 800px;
  background-color: #f0f0f0;
  .row-time {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    .col-time {
      line-height: 32px;
      span {
        padding: 5px;
      }
      .time-link {
        cursor: pointer;
      }
    }
  }
  .row-chart {
    height: auto;
    margin-bottom: 15px;
    .col-chart-two {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title-two {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main-two {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
      }
    }
    .col-chart {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
        .seamless-warp {
          height: 333px;
          overflow: hidden;
          li {
            line-height: 37px;
          }
        }
      }
    }
  }
}
.row-div {
  margin-bottom: 15px;
}
</style>